<template>
  <div id="app">
      <header class="app-head">
          <div class="app-head-top">
            <div class="app-head-logo">
              <img src="./assets/Category.png" alt="">
            </div>
            <div class="app-head-middle">
              <router-link  tag="li" @click.native='rotlink("01")' to="head01">
                <span class="rotlink active" v-if="controlnum == '01'"></span>
                <span class="rotlink" v-else></span>
              </router-link>
              <router-link  tag="li"  @click.native='rotlink("02")' to="head02">
                <span class="rotlink rotlink1 active1" v-if="controlnum == '02'"></span>
                <span class="rotlink rotlink1" v-else></span>
              </router-link>
              <router-link tag="li"  @click.native='rotlink("03")'  to="head03">
                <span class="rotlink rotlink2 active2" v-if="controlnum == '03'"></span>
                <span class="rotlink rotlink2" v-else></span>
              </router-link>
            </div>
            <div class="app-head-middle-bottom">
              <router-link class="app-head-middle-bottomchild" tag="li" to="head01">推荐</router-link>
              <router-link class="app-head-middle-bottomchild" tag="li"  to="head02">朋友</router-link>
              <router-link class="app-head-middle-bottomchild" tag="li"  to="head03">电台</router-link>
            </div>
          </div>
        <!--<router link-to></router>-->
      </header>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      controlnum: '02',
    };
  },
    created:function() {
    },
    methods: {
      rotlink:function(index) {
          this.controlnum = index ;
      }
    }
}
</script>
<style>
  router-link-active{
    background: url("./assets/hdicon1.png") no-repeat;
    background-size: cover;
  }
  .active1{
    background: url("./assets/hdicon2.png") no-repeat;
    background-size: cover;
  }
  .active2{
    background: url("./assets/hdicon3.png") no-repeat;
    background-size: cover;
  }
</style>
